<!--
 * @Description: 
 * @Date: 2023-03-15 10:34:15
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 15:44:14
-->
<template>
	<div class="cun-she-ju">
		<div class="header">
			<div class="header-content">
				由武隆区政府、村社、龙头企业共同成立的“乡宿联盟”，争取了项目资金和农担贷款，用于村民房屋进行改建，使其达到中端精品农家乐标准，并设立统一标准改善村屋住宿条件，统一培训村民达到接待游客标准；由“乡宿联盟”统一对外推广宣传，引入重庆民宿产业联盟成立仙女山服务中心，把先进的民宿经营经验和其他旅游业态经营经验通过荆竹夜校形式传授给当地村民，带动参与村民共同发展乡村旅游，打造乡村精准扶贫和农家乐旅游接待样板。在区文化旅游委、仙女山街道、荆竹村社、大渝网、重庆农担公司、建设银行等相关部门的共同努力下，乡宿联盟现参与村民客房约110多间，产业振兴已经初具成效。2022年已新增10户乡宿，每户乡宿实现10万新增年收入。
			</div>
			<el-image class="cover" fit="cover" :src="cosPrefix + 'three-level/xiangsu/xiangsulianmeng/1.png'" />
		</div>

		<div class="body">
			<div class="title">乡宿推荐</div>

			<div class="jiudian-list">
				<JiuDianItem :detail="item" v-for="(item, index) in list1" :key="index" />
			</div>

			<div class="tabs">
				<div :class="['tab', { active: activeTab == index }]" @click="activeTab = index" v-for="(item, index) in list2" :key="index">{{ item.name }}</div>
			</div>

			<div class="list">
				<div class="box" v-for="(item, index) in list2[activeTab].list" :key="index">
					<el-carousel class="banner-box" indicator-position="none" arrow="always">
						<el-carousel-item v-for="(bannerImg, i) in item.bannerList" :key="i">
							<el-image class="b-img" fit="cover" :src="bannerImg + '?imageMogr2/thumbnail/750x'" />
						</el-carousel-item>
					</el-carousel>

					<div class="info">
						<div class="name">{{ item.name }}</div>
						<div class="content">
							<p>{{ item.content }}</p>
							<p>{{ item.tel }}</p>
						</div>
						<el-button class="btn" color="#8A1313">了解更多</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="JiuDian">
import { useBaseStore } from "@/store/base";
import JiuDianItem from "./JiuDianItem.vue";

const { cosPrefix } = useBaseStore();
const list1 = [
	{
		name: "木夕美宿(重庆武隆火车站店)",
		bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/jiudiantuijian/1.png"]
	},
	{
		name: "七仙女民宿(仙女山店)",
		bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/jiudiantuijian/2.png"]
	},
	{
		name: "图作缘民宿",
		bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/jiudiantuijian/3/1.jpg", cosPrefix + "three-level/xiangsu/xiangsulianmeng/jiudiantuijian/3/2.jpg"]
	}
];

const activeTab = ref(0);

const list2 = [
	{
		name: "武隆",
		list: [
			{
				name: "曼联民宿",
				content: `陌生的地方也能温暖如家，珍惜和您的每一次的相遇。民宿地处武隆区中心位置，周边商业繁华，距离汽车站，火车站均很方便，高速下道再行驶2分钟即到。`,
				tel: "电话: 17323628985",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/wulong/1.png"]
			},
			{
				name: "歇檐美宿",
				content: `歇檐美宿位于重庆市武隆区芙蓉东路，地处仙女山、天坑三桥、龙水峡地缝、芙蓉洞等旅游景点的中心位置，距离武隆火车站仅400米到武隆火车站步行仅需
                5分钟，距离武隆汽车站仅800米，交通便利，地理位置优越，坐拥武隆区核心商圈`,
				tel: "电话: 15330376033",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/wulong/2.png"]
			},
			{
				name: "木夕美宿",
				content: `木夕美宿(重庆武隆火车站店)位于重庆市武隆区芙蓉东路，地处仙女山、天坑三桥、龙水峡地缝、芙蓉洞等旅游景点的中心位置，距离武隆火车站仅500米
                到武隆火车站步行仅需8分钟，距离武隆汽车站仅800米，交通便利，地理位置优越，坐拥武隆区核心商圈，美食、购物、看电影、健身娱乐都非常方便。`,
				tel: "电话: 19936383601",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/wulong/3.png"]
			}
		]
	},
	{
		name: "仙女山",
		list: [
			{
				name: "仙女山麓岚拾居",
				content: `仙女山麓岚拾居座落于仙女山镇之中，位于武隆仙女山镇逸云路，紧邻世界自然遗产天生三桥、龙水峡地缝与5A级仙女山国家森林公园。`,
				tel: "电话: 18875363011",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/xiannvshan/1.png"]
			},
			{
				name: "七仙女民宿",
				content: `酒店位于重庆市武隆区国家5A级旅游风景区仙女山境内。周边有森林33万亩，天然草原10万亩，夏季平均气温24℃。仙女山与神奇的芙蓉洞、
                秀美的芙蓉江、天生三硚群地质奇观组合为重庆旅游观光度假胜地。`,
				tel: "电话:  023-77707678",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/xiannvshan/2.png"]
			}
		]
	},
	{
		name: "荆竹",
		list: [
			{
				name: "观风度假山庄",
				content: `位于仙女山街道海拔1400米，是集休闲娱乐、避暑纳凉、各种团建活动为一体的好去处，距离城区20公里左右，是去往世界自然遗产旅游区天生三桥、南国草原仙女山、芙蓉洞等各个景点的中转地。
地址：导航输入“观风度假山庄”
`,
				tel: "联系方式：蔡先生 13996759532 17265670678",
				bannerList: [
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/guanfeng/1.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/guanfeng/2.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/guanfeng/3.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/guanfeng/4.jpg"
				]
			},
			{
				name: "荆竹度假院",
				content: `暂无介绍`,
				tel: "暂无联系方式",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/dujiayuan/video1.png"]
			},
			{
				name: "荆竹村图作缘民宿",
				content: `荆竹村图作缘民宿位于仙女山街道荆竹村杨柳组47号，该民宿秉持着“如果你厌倦了喧嚣都市里的索然无味，如果你的心中还有着对远方的向往。
                你不用走太远，来仙女山图作缘民宿就可以实现你的愿望”为目标。特色住宿、特色餐饮、烤羊、烤鸡、果园采摘、蔬菜自由、会议、茶室、KTV，农特产品全年配送。`,
				tel: "联系电话：023—77733363、18983337333",
				bannerList: [
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/1.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/2.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/3.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/4.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/5.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/6.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/7.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/8.jpg",
					cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/tuzuoyuan/9.jpg"
				]
			},
			{
				name: "闲适园民宿",
				content: `闲适园民宿位于荆竹村杨柳村民小组，周边有“寻梦园”“葡萄仙坛”等果园3家、农家乐8家、民宿5家，房间16个，35个床位，包吃住1800人/月。`,
				tel: "电话: 18581221757 杨先生",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/xianshiyuan/1.jpg"]
			},
			{
				name: "园田居",
				content: `暂无介绍`,
				tel: "暂无联系方式",
				bannerList: [cosPrefix + "three-level/xiangsu/xiangsulianmeng/jingzhucun/yuantianju/1.JPG"]
			}
		]
	}
	// {
	// 	name: "懒坝",
	// 	list: [
	// 		{
	// 			name: "荆竹村图作缘民宿",
	// 			content: `荆竹村图作缘民宿位于仙女山街道荆竹村杨柳组47号，该民宿秉持着“如果你厌倦了喧嚣都市里的索然无味，如果你的心中还有着对远方的向往。
	//             你不用走太远，来仙女山图作缘民宿就可以实现你的愿望”为目标。装修温馨的卧室，原生态的设计以及原木...
	//             预订电话：18983337333`,
	// 			tel: "电话: 13996759532 蔡先生",
	// 			bannerList: [
	// 			cosPrefix+	"three-level/xiangsu/xiangsulianmeng/tuzuo/1.jpg",
	// 			cosPrefix+	"three-level/xiangsu/xiangsulianmeng/tuzuo/2.jpg"
	// 			]
	// 		}
	// 	]
	// }
];
</script>
<style lang="scss" scoped>
.cun-she-ju {
	padding: 40px 320px;
}
.header {
	display: flex;
	.header-content {
		padding-right: 40px;
		font-size: 18px;
		line-height: 30px;
		text-indent: 32px;
	}
	div {
		flex: 1;
		font-size: 16px;
		color: #333333;
	}
	.cover {
		width: 640px;
		height: 290px;
	}
}
.body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	.title {
		margin: 40px;
		font-size: 24px;
		font-weight: bold;
		color: #101010;
	}
	.jiudian-list {
		display: flex;
	}
	.tabs {
		display: flex;
		.tab {
			padding: 0 20px;
			font-size: 24px;
			cursor: pointer;
			border-right: 1px solid #dedede;
			&:hover,
			&.active {
				color: #8a1313;
			}
			&:last-child {
				border: none;
			}
		}
	}
	.list {
		.box {
			display: flex;
			margin-top: 40px;
			.banner-box {
				position: relative;
				box-sizing: border-box;
				width: 413px;
				.b-img {
					width: 100%;
					height: 275px;
				}
				:deep(.el-carousel__arrow) {
					width: 32px;
					height: 100px;
					background-color: rgba($color: #ffffff, $alpha: 40%);
					border: 0;
					border-radius: 0;
					&.el-carousel__arrow--right {
						right: 0;
					}
					&.el-carousel__arrow--left {
						left: 0;
					}
					.el-icon svg {
						width: 25px;
						height: 25px;
						background-size: 25px 25px;
					}
				}
			}
			.info {
				display: flex;
				flex: 1;
				flex-direction: column;
				padding-left: 40px;
				.name {
					font-size: 24px;
					font-weight: bold;
					color: rgb(25 25 25 / 100%);
				}
				.content {
					margin: 40px 0;
					font-size: 16px;
					color: rgb(102 102 102 / 100%);
				}
				.btn {
					width: 116px;
					font-size: 16px;
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.cun-she-ju {
		padding: 16px;
		.header {
			flex-direction: column-reverse;
			.cover {
				width: 100%;
			}
			.header-content {
				padding: 0;
			}
		}
		.list {
			width: 100%;
			.box {
				flex-direction: column;
				.banner-box {
					width: 100%;
				}
				.info {
					padding: 0;
					.content {
						margin: 8px 0;
					}
				}
			}
		}
		.body {
			.jiudian-list {
				flex-wrap: wrap;
				width: 100%;
			}
		}
	}
}
</style>
